<template>
	<view class="container">
		<view class="flex f-column f-align" v-if="isfetch">
			<view class="flex f-align f-justifyB blue-box">
				<view class="flex f-column font28 white">
					<text>订单编号：{{orderInfo.orderNumber}}</text>
					<text class="mt10">时　　间：{{orderInfo.transactionTime}}</text>
				</view>
				<text class="font32 white">数量X{{orderInfo.goodsNumber}}</text>
			</view>
			<view class="blue-line"></view>
			<view class="fixed-box">
				<view class="flex f-align f-justifyB mt20" v-for="item in orderInfo.orderDetails" :key="item.id" @click="$api.toPage('./orderStep?id=' + item.id)">
					<view class="flex f-align">
						<image :src="item.goodsUrl" style="width: 90rpx;height: 90rpx;"></image>
						<view class="flex f-column ml20">
							<view class="font28 gray333">
								{{item.goodName}}
								<text class="ml20" style="font-size: 20rpx;color: #FF0000;">{{code == item.shoeBuckleNumber ? '当前' : ''}}</text>
							</view>
							<text class="font24 gray333 mt10">订单编号：{{item.shoeBuckleNumber}}</text>
						</view>
					</view>
					<view class="flex f-align">
						<text class="font28 gray333">{{item.orderState}}</text>
						<text class="zlicon icon-right font28 gray333 ml10"></text>
					</view>
				</view>
			</view>
			<view class="detail-bottom" v-if="type != 3">
				<view v-if="role != '工厂入口'" class="btn font32 white f-center" @click="confirmHandle">确认接收</view>
				<view v-else class="flex f-align f-justifyB">
					<view class="s-btn font32 white f-center" @click="toPage()">拍照上传</view>
					<!-- <view class="s-btn font32 white f-center" @click="printbarcode">打印条码</view> -->
					<view class="s-btn font32 white f-center" @click="confirmHandle">{{type == 1 ? '开始清洗' : '清洗完成'}}</view>
				</view>
			</view>
		</view>
		<view class="font36 gray666 bold f-center mt50">
			未查询到订单信息
		</view>
	</view>
</template>

<script>
	import orderStep from './orderStep'
	// var plugin = requirePlugin("myPlugin");
	export default {
		data() {
			return {
				formData: {
					account: '',
					password: ''
				},
				code: '',
				orderInfo: {},
				isfetch: false,
				type: '',
				role: '',
				photoUrl: []
			}
		},
		onLoad(option) {
			this.code = option.code
			this.type = option.type
			this.role = uni.getStorageSync('pageTitle')
			if (this.role == '工厂入口') {
				// 当前小程序账号的appid
				// let appId = uni.getAccountInfoSync().miniProgram.appId
				// plugin.Init(appId)
			}
			this.getDataList()
		},
		components: {
			orderStep
		},
		onReady() {
			let title = ''
			if (this.title == '校园入口') {
				this.type == 1 ? title = '接收净衣' : title = ''
			} else if (this.title == '配送入口') {
				this.type == 1 ? title = '接收脏衣' : title = '接收净衣'
			} else {
				// plugin.AutoConnect();
				this.type == 1 ? title = '开始清洗' : title = '清洗完成'
			}
			uni.setNavigationBarTitle({
				title
			})
		},
		methods: {
			toPage() {
				this.$api.toPage('./takePhoto?arr=' + JSON.stringify(this.photoUrl))
			},
			printbarcode(item) {
				if (!plugin.getconnectionstate()) {
					uni.showModal({
						title: '提示',
						content: '是否连接打印机？(连接时请将设备贴近手机，连接完成后再次打印)',
						success: res => {
							if (res.confirm) {
								plugin.nearconnection();
							}
						}
					});
				} else {
					let _this = this
					uni.showLoading({
						title: '打印条码中，请稍后...',
						mask: true
					})
					let arr = this.orderInfo.orderDetails.filter(item => {
						return item.shoeBuckleNumber == _this.code
					})
					let widthScal
					
					if (arr[0].shoeBuckleNumber.length >= 6 && arr[0].shoeBuckleNumber.length < 8) {
						widthScal = 5
					} else if (arr[0].shoeBuckleNumber.length >= 8 && arr[0].shoeBuckleNumber.length < 10) {
						widthScal = 4
					} else if (arr[0].shoeBuckleNumber.length >= 10) {
						widthScal = 3
					}
					
					plugin.lableBegin(0, 0, 576, 360, 0)
					plugin.lableBarcode(90, 60, 12, 100, widthScal, 0, arr[0].shoeBuckleNumber);

					plugin.lableText(0, 190, 1, 0, 0, `衣子名称：${arr[0].goodName}`)
					plugin.lableText(0, 220, 1, 0, 0, `订单编号：${arr[0].shoeBuckleNumber}`)
					plugin.lableText(0, 250, 1, 0, 0, `用户昵称：${_this.orderInfo.userName}`)
					plugin.lableText(0, 280, 1, 0, 0, `用户电话：${_this.orderInfo.userPhone}`)
					plugin.lableText(0, 310, 1, 0, 0, `下单时间：${_this.orderInfo.transactionTime}`)
					plugin.lableText(0, 340, 1, 0, 0, `下单地址：${_this.orderInfo.gzbhAddress}`)

					plugin.lableend()
					setTimeout(() => {
						uni.hideLoading()
					}, 5000)
				}
			},
			confirmHandle() {
				uni.showLoading({
					title: '请求中...'
				})
				let url = ''
				let params = {}
				if (this.role == '配送入口') {
					if (this.type == 1) {
						url = '/Order/deliverymanReceiveDirtyClothes'
						params = { shoeBuckleNumber: this.code, adminId: uni.getStorageSync('adminId') }
					} else {
						url = '/Order/deliverymanReceiveNetCloth'
						params = { shoeBuckleNumber: this.code, adminId: uni.getStorageSync('adminId') }
					}
				} else if (this.role == '工厂入口') {
					if (!this.photoUrl.length) {
						this.$api.msg('请拍照上传')
						return
					}

					if (this.type == 1) {
						url = '/Order/factoryVerify'
						params = { shoeBuckleNumber: this.code, orderStateUrl: this.photoUrl.join(','), adminId: uni.getStorageSync('adminId') }
					} else {
						url = '/Order/cleanoutFinish'
						params = { shoeBuckleNumber: this.code, orderStateUrl: this.photoUrl.join(','), adminId: uni.getStorageSync('adminId') }
					}
				} else {
					url = '/Order/adminReceive'
					params = { shoeBuckleNumber: this.code, adminId: uni.getStorageSync('adminId') }
				}
				this.$http.ajax({
					url,
					params
				}).then((res) => {
					uni.hideLoading()
					this.$api.msg(res.msg)
					if (res.code == 200) {
						setTimeout(() => {
							uni.navigateBack()
						}, 300)
					}
				})
			},
			getDataList() {
				this.$http.ajax({
					url: '/Order/selectByShoeBuckleNumber',
					params: {
						shoeBuckleNumber: this.code
					}
				}).then((res) => {
					if (res.code == 200) {
						this.isfetch = true
						this.orderInfo = res.order
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 42rpx 32rpx 0;
		padding-bottom: 90rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 90rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 90rpx);
		background-color: #FFFFFF;
		position: relative;

		.fixed-box {
			position: absolute;
			left: 52rpx;
			top: 220rpx;
			z-index: 99;
			background: linear-gradient(179deg, #8FB6FF 0%, #FFFFFF 100%);
			width: 646rpx;
			padding: 78rpx 20rpx;
		}

		.blue-box {
			width: 686rpx;
			height: 120rpx;
			background: #4082FD;
			border-radius: 20rpx;
			padding: 0 56rpx;
		}

		.blue-line {
			width: 686rpx;
			height: 32rpx;
			background: #4082FD;
			border-radius: 16rpx;
			margin-top: 42rpx;
		}

		.btn {
			width: 686rpx;
			height: 70rpx;
			background: #4082FD;
			border-radius: 36rpx;
			margin: 20rpx auto 0;
		}

		.s-btn {
			width: 200rpx;
			height: 70rpx;
			background: #4082FD;
			border-radius: 36rpx;
			margin: 20rpx 0 0;
		}

		.detail-bottom {
			width: 686rpx;
			height: 100rpx;
			border-top: 2rpx solid #EAEAEA;
			padding-left: 32rpx;
			padding-right: 32rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			position: fixed;
			right: 0;
			bottom: 0;
			background: #FFFFFF;
			box-sizing: content-box;
		}
	}
</style>
